<template>
    <div>
      <el-card class="box-card" style="width: 40%;margin: auto;">
        <div style="text-align: center">
        <h2>用户登陆</h2>
        <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          <el-form ref="form" :rules="rules" :model="form">
            <div class="form-item">
              <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
            </div>
            <div class="form-item">
              <el-form-item prop="password">
                <el-input v-model="form.password" placeholder="请输入密码"></el-input>
              </el-form-item>
            </div>
            <div class="form-item">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-input v-model="form.verify" placeholder="请输入验证码"></el-input>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <img class="ValidateImage" src="../assets/timg3.jpg">
                  </div>
                </el-col>
              </el-row>
            </div>
            <!-- 按钮 -->
            <div class="form-item switch">
              <el-row :gutter="10">
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-switch
                      v-model="form.value2"
                      active-color="#13ce66"
                      inactive-color="#ff4949">
                    </el-switch>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <span>记住我</span>
                  </div>
                </el-col>
              </el-row>

            </div>
            <div class="form-item button">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-button type="primary" @click="onSubmit('form')">登录</el-button>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-button>重置</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-form>
      </div>
      </el-card>
    </div>
</template>

<script>
  import axios from 'axios'
  import qs from "qs"
  export default {
    name:'Login',
    data() {
      return {
        form: {
          username: '',
          password: '',
          verify: '',
          value1: true,
          value2: true
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 1, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输密码', trigger: 'blur'},
            {min: 3, max: 16, message: '长度在6-16个字符', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      onSubmit(formName) {
        var that = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // that.$router.push('/home')

            axios.post("/sys/login",qs.stringify(that.form)).then(res =>{
              if(res.data.code=='200'){
                sessionStorage.setItem("user","aaa")
                that.$router.push("/home")
              }if(res.data.code=='403'){
                that.$router.push("/Login")
              }
              else{
                that.loginerror = res.data.message;
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });


      }
    }
  }
</script>

<style scoped>
  #comment-body {
    margin: auto;
    margin-top: 20px;
    border: #fef2eb solid;
    border-radius: 5px;
    width: 40%;
    height: 500px;
  }

  .form-item switch {
    margin-top: 20px;
  }

  h1 {
    text-align: -webkit-center;
    font-family: 隶书;
  }

  .form-item {
    width: 80%;
    margin: 30px auto;
  }

  .form-item button {
    width: 100%;
  }

  .ValidateImage {
    width: 100%;
    height: 40px;
    display: inline;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 40px;
  }
</style>
